import React from './react';
import ReactDOM from './react-dom';

function Child(props, forwardRef) {
  const inputRef = React.useRef();
  React.useImperativeHandle(forwardRef, () => ({
    focus() {
      inputRef.current.focus();
    }
  }));
  return (<input ref={inputRef} />)
}
const ForwardedChild = React.forwardRef(Child);

function Parent() {
  let [number, setNumber] = React.useState(0);
  let inputRef = React.useRef();
  let getFocus = () => {
    inputRef.current.focus();
    //inputRef.current.remove();
  }
  return (
    <div>
      <ForwardedChild ref={inputRef} />
      <button onClick={getFocus}>获得焦点</button>
      <p>{number}</p>
      <button onClick={() => setNumber(number + 1)}>+</button>
    </div>
  )
}
ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);



/**
 * 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
 * useEffect不会阻塞浏览器渲染，而 useLayoutEffect 会阻塞浏览器渲染
 * useEffect会在浏览器渲染结束后执行,useLayoutEffect 则是在 DOM 更新完成后,浏览器绘制之前执行
 */
// function Animation(props) {
//   const ref = React.useRef();
//   let style = {
//     width: '100px',
//     height: '100px',
//     borderRadius: '50%',
//     backgroundColor: 'red'
//   }
//   React.useLayoutEffect(() => {
//     ref.current.style.transform = `translate(400px)`;
//     ref.current.style.transition = 'all 500ms';
//   });
//   // React.useEffect(() => {
//   //   ref.current.style.transform = `translate(400px)`;
//   //   ref.current.style.transition = 'all 500ms';
//   // });
//   return (
//     <div style={style} ref={ref}></div>
//   )
// }
// ReactDOM.render(
//   <Animation />,
//   document.getElementById('root')
// );
